<template>
    <div>
        <el-card shadow="hover" :body-style="{padding: '0px'}">
            <div class="card-box clearfix">
                <header class="borderBottomColor">
                    <i class="box-title-icon fontColor" :class="content.icon"></i>
                    <span class="portlet-title fontColor">{{content.name}}</span>

                    <el-button class="btn-more" type="text">
                        <a class="fontColor" :href="content.moreUrl" target="_blank">更多</a>
                    </el-button>
                </header>
                <div class="tabs-content-box">
                    <el-table :data="todoList" :show-header="false" @row-click="articleDetailFn" style="width: 100%;font-size:14px;;cursor:pointer;">
                            <el-table-column width="40">
                                <template slot-scope="scope">
                                    <div class="todo-tag" v-bind:class="'todo-tag-'+scope.row.id">{{scope.row.tag}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column>
                                <template slot-scope="scope">
                                    <div class="todo-item">{{scope.row.title}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column width="80">
                                <template slot-scope="scope">
                                    <div class="todo-name">{{scope.row.name}}</div>
                                </template>
                            </el-table-column>
                            <el-table-column width="105">
                                <template slot-scope="scope">
                                    <div class="todo-date">{{scope.row.date}}</div>
                                </template>
                            </el-table-column>
                        
                    </el-table>
                </div>
            </div>
        </el-card>
    </div>
</template>

<script>
export default {
    name: 'ArticleDefault',
    props: ['content'],
    data () {
        return {
            ops: {
                rail: {
                    opacity: '0'
                },
                bar: {
                    onlyShowBarOnScroll: false,
                    background: '#909399',
                    size: '10px'
                }
            },
            todoList: [
                {
                    tag: '1',
                    id: 1,
                    title: '修复100个bug',
                    name: '张三',
                    date: '2019-05-08'
                },
                {
                    tag: '2',
                    id: 2,
                    title: '修复100个bug',
                    name: '张三',
                    date: '2019-05-08'
                },
                {
                    tag: '3',
                    id: 3,
                    title: '修复100个bug',
                    name: '张三',
                    date: '2019-05-08'
                }
            ]
        };
    },
    created(){
    },
    methods: {
        handleNewsClick () {
            
        },
        articleDetailFn(row){
            // this.$router.push({path:'/ArticleMore'});
            let routeData = this.$router.resolve({
                path: '/ArticleMore',
                query: { id:row.id,name:'通知公告' }
            });
            window.open(routeData.href, '_blank');
        }
    }
};
</script>

<style lang="scss" scoped>
.portlet {
    width: 100%;
    height: 100%;
    overflow: auto;
}

header {
    padding: 10px;

    .portlet-title {
        display: inline-block;
        font-size: 18px;
        padding: 0 10px;
        margin-left: 30px;
    }
}

.btn-more {
    font-size: 15px;
    float: right;
    padding-right: 10px;
}
</style>